<template>
  <div class="student">
    <pull-refresh
      :count="counts"
      :list="results"
      @confirm="confirm"
      @onLoad="onLoad"
      @onRefresh="onRefresh"
      @turn="turn"
    >
      <template v-slot:userInfo="item">
        <div class="user-info">
          <div class="name">
            {{ item.item.studentName }}({{ item.item.studentNumber }})
          </div>
          <span class="academy">{{ academyList[item.item.collegeId - 1].name }}</span>
          <span class="class"> ({{ item.item.grade }})</span>
        </div>
      </template>
    </pull-refresh>
  </div>
</template>

<script>
import { reactive, ref, nextTick } from "@vue/reactivity";
import PullRefresh from "../../Common/pull-refresh.vue";
import { onMounted } from "@vue/runtime-core";
import { getApprovalList, approvalStudent } from "../../../network/axios";
import { Notify } from "vant";
import { lists } from "../../../data/userInfo";

export default {
  components: {
    PullRefresh,
  },
  setup(props, context) {
    let counts = ref(null);
    let results = ref([]);
    let academyList = lists;
    let news = [];
    let parameObject = reactive({
      page: 1,
      limit: 10,
      verify: "N",
    });
    const onRefresh = (callback) => {
      // 上拉刷新
      console.log("上拉刷新");
      parameObject.page = 1;
      getUserStudentList("onRefresh", callback);
    };
    const onLoad = (callback) => {
      // 下拉加载
      console.log("下拉加载");
      getUserStudentList("onLoad", callback);
      //   parameObject.page++;
    };
    // onMounted(() => {
    //   getUserStudentList();
    // });
    const getUserStudentList = async (type, callback) => {
      const {
        data: { code, count, result },
      } = await getApprovalList(parameObject);
      console.log(code, count, result);
      if (code === 200) {
        counts.value = count; // 总条数
        console.log(counts.value, "countsValue");
        if (type === "onRefresh") {
          callback();
          results.value = result;
          parameObject.page++;

          console.log(results.value, "results.value");
        } else {
          results.value.push(...result);
          parameObject.page++;
          setTimeout(() => {
            if (callback) {
              callback();
            }
          });
        }
      } else {
        Notify({
          type: "danger",
          message: "服务器错误，读取列表失败",
        });
      }
    };
    const user = () => {
      results.value = [];
    };
    //驳回
    const turn = async (item) => {
      const {
        data: { code, result },
      } = await approvalStudent({
        verify: "N",
        id: item.id,
      });
      if (code === 200) {
        Notify({
          type: "success",
          message: `${result}`,
        });
      } else {
        Notify({
          type: "",
          message: `${result}`,
        });
      }
    };

    // 审批同意
    const confirm = async (item) => {
      const {
        data: { code, result },
      } = await approvalStudent({
        verify: "Y",
        id: item.id,
      });
      if (code === 200) {
        Notify({
          type: "success",
          message: `${result}`,
        });
      } else {
        Notify({
          type: "",
          message: `${result}`,
        });
      }
    };
    return {
      counts,
      results,
      confirm,
      onLoad,
      onRefresh,
      turn,
      user,
      academyList,
    };
  },
};
</script>

<style lang="scss" scoped>
.user-info {
  font-size: 0.35rem;
  padding: 0.25rem;
  border-bottom: 1px solid #ccc;
  .name {
    font-size: 0.35rem;
    font-weight: 600;
    margin: 0.12rem 0;
    color: #1b809e;
  }
  .academy {
    font-size: 0.3rem;
    color: #aa6708;
  }
  .class {
    font-size: 0.3rem;
    color: #900b09;
  }
}
</style>
